<script type="text/javascript" src="/public/library/jquery/jquery.js"></script>
<style>
.loading {
    background: url(/public/library/jquery/images/spinner.gif) no-repeat center center
}

</style>
<link rel="stylesheet" href="/public/library/hvn/hgallery.css?w" type="text/css" media="screen" charset="utf-8" />
<script src="/public/library/hvn/jquery.hgallery.js?1a" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript"> 
$(function(){
    $("div.hgallery_wrapper").hgallery({
			itemsPerPage : 3,
			animationSpeed : 'normal', /* fast/normal/slow */
			/*item = li*/
            itemWidth: 75, /*not including border*/
            itemHeight: 65, /*pixels*/
            itemMargin: 3, /*left-right Margin for li */
            itemTopMargin: 2, /* margin from li to ul */
            itemBorderWidth: 2,
            urWrapperBorderWidth:2, /* border around the itemsPerPage list */
            mainImageSize: 'medium',
		});
});
</script>

<div class="hgallery_wrapper" >
    <div class="hgallery_main_image_div" style="text-align:center">
           <img src='' class="hgallery_main_image" />
    </div>
    <hr/>

    <div class="hgallery_item_navigation"> 
        <a href="javascript:void()" class="hgallery_item_prev"><?=t(3) ?></a>
            <span class="imageIndex"></span>/<span class="imageTotal"></span>
        <a href="javascript:void()" class="hgallery_item_next"><?=t(4) ?></a>
    </div>
    

    <div class="ul_wrapper"> <!-- image li list ul -->
        <ul class="hgallery_ul">
            <?foreach ($this->displayFiles as $f) :?>
            <?if (file_exists(APP_PATH . sprintf( $this->base, "xsmall") . $f)) :?>
                <li><img src="<?=sprintf($this->base, "xsmall") . $f?>"></li> 
            <?endif?>
            <?endforeach?>
        </ul>
    </div>
    
    <div style="border: 1px solid red;">
        <ul class="hgalery_page_navigation_ul">
            <li class="prev"><a href="#"><?=t(3) ?></a>
            </li>
            <li>
                    <span class="pageIndex"></span>/<span class="pageTotal"></span>
            </li>
            <li class="next"><a href="#"><?=t(4) ?></a>
            </li>
        </ul>                
    </div>
    
</div>

